<!-- 组合式 -->
<script setup>
	import {
		ref,
		computed,
	} from 'vue';

	import util from '@/utils/util';

	// 参数接收
	const props = defineProps({

		// 背景颜色
		backgroundColor: {
			type: String,
			default: '#fff',
		},
		borderRadius: {
			type: String,
			default: '',
		},
		detailPage: {
			type: Boolean,
			default: false,
		},

		type: {
			type: String,
			default: 'index-game',
		},
		info: {
			type: Object,
			default: () => {
				return {};
			}
		},
	})

	// Vue3.4 版本之后，我们将使用 defineModel 替代子组件中的 props 和 emit。
	// 组件中可以支持定义多个 defineModel，可以满足绑定多个双向绑定的属性
	const modelValue = defineModel();

	// // 是否可以报名
	// const apply = computed(() => {
	// 	const {
	// 		bmStartDate,
	// 		bmEndDate,
	// 		bsDate,
	// 		scoreDate,
	// 	} = props.info;

	// 	// 当前时间
	// 	const time = util.getMYD('formattedDate')
	// 	return bmStartDate <= time && time <= bmEndDate;
	// });

	// 报名比赛
	const buttonValue = computed(() => {

		// if (apply.value) return '报名比赛';

		const {
			bsEndDate,
			status,
		} = props.info;

		if (status == 1) return '准备报名';
		else if (status == 2) return '开始报名';
		else if (status == 3) return '报名结束';
		else if (status == 4) return '正在比赛';

		else if (status == 5) return '比赛结束';
		else if (status == 6) return '比赛结束';

		// 当前时间
		// const time = util.getMYD('formattedDate')

		// 
		// return bsEndDate <= time ? '比赛结束' : '报名结束';
	})


	// 详情
	function changeTo(url) {

		// let url = `/home/apply`;
		let param = {
			id: props.info.id || ''
		};

		if (!param.id || !url) return;
		util.to(url, param);
	}

	// 回调
	const emit = defineEmits(['change'])
</script>


<template>

	<div class="l-card-game" :class="type" :style="{backgroundColor}" @click="changeTo('/game-details')">
		<div class="image">
			<el-image :src="util.getHttpImageUrl(info.image)" fit="cover" style="width: 100%; height:100%;"
				v-if="info.image" />
			<div class="time" :class="{'disabled' : info.status > 4  }"> 赛事报名截止日期：{{info.bmEndDate}}</div>
			<div class="myApply" v-if=" type == 'myApply' ">已报名</div>
		</div>

		<div class="card-info">
			<div class="title">{{info.title || info.name || '--'}}</div>
			<div class="card-list">

				<div class="card-li color" v-if="type == 'game-details'">
					<img :src="util.getImageUrl('icon1.png')" class="icon" />
					<text>比赛时间：{{info.bsDate || '--'}}</text>
				</div>

				<div class="card-li">
					<img :src="util.getImageUrl('icon1.png')" class="icon" />
					<text>比赛地点：{{info.address || '--'}}</text>
				</div>
				<div class="card-li">
					<img :src="util.getImageUrl('icon2.png')" class="icon" />
					<text>赛事类别：{{info.typeName || '--'}}</text>
				</div>

				<div class="card-li" v-if="type == 'game-details'">
					<el-image src="/static/card3.png" mode="widthFix" class="icon" />
					<text>参赛对象：{{info.xyDeptName || '--'}}</text>
				</div>
			</div>

			<!-- 报名比赛 -->
			<l-button :type="info.status < 5 ? 'primary' : 'disabled' " borderRadius="4px" :value="buttonValue"
				@click.stop="info.status == 2 ? changeTo('/home/apply') : ''" />

		</div>
	</div>
</template>


<style lang="scss">
	.l-card-game {
		background: #FFFFFF;
		overflow: hidden;

		&.index-game {
			cursor: pointer;
			border-radius: 4px;
			box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);

			.image {
				width: 100%;
				height: 200px;
			}

			.card-info {
				padding: 15px 20px;

				.title {
					font-size: 18px;
					color: #333333;
				}

				.card-list {
					font-size: 14px;
					color: #888888;

					.card-li {
						margin-top: 10px;
						display: flex;
						align-items: center;

						.icon {
							width: 14px;
							height: 14px;
							margin-right: 8px;
						}

						text {}
					}
				}
			}

			.l-button {
				margin: 0 auto;
				margin-top: 15px;
				width: 90px;
				line-height: 36px;
				font-size: 14px;
			}
		}

		&.game-details {
			display: flex;

			.image {
				width: 581px;
				height: 387px;
			}

			.card-info {
				flex: 1;
				margin-left: 36px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.title {
					font-size: 30px;
					color: #333333;
					line-height: 48px;
				}

				.card-list {
					font-size: 18px;
					color: #999999;

					.card-li {
						line-height: 40px;
						display: flex;
						align-items: center;

						.icon {
							display: none;
						}

						&.color {
							color: #5173F2;
						}
					}
				}
			}

			.l-button {
				width: 360px;
				line-height: 48px;
				font-size: 18px;
				;
			}
		}

		.image {
			overflow: hidden;
			background-color: #cccccc;
			position: relative;

			font-size: 16px;
			color: #FFFFFF;
			line-height: 32px;

			.time {
				position: absolute;
				top: 10px;
				left: 0;

				padding: 0 13px;
				background: #5173F2;
				border-radius: 0px 4px 4px 0px;

				&.disabled {
					background-color: #BFBFBF;
				}
			}

			.myApply {
				position: absolute;
				top: 10px;
				right: 13px;

				padding: 0 14px;
				background: #FF396F;
				border-radius: 4px;
			}
		}

		.card-info {}
	}
</style>